<template>
    <div id="app">
		   <router-view  v-if="isRouterAlive"></router-view>
            <div v-if="loading" v-loading="loading" 
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            class="pop-loading">
            </div>
    </div>
</template>

<script>
    export default {
        name:'App',
        computed:{
            loading(){
                return this.$store.state.loading.loading;
            }
        },
        data(){
            return{
                isRouterAlive: true
            }
        },
        // 点击页面侧边栏重载功能的实现（该处提供了提供给后代组件的数据/方法）
        provide() {
            return{
                isReload: this.isReload
            }
        },
        methods: {
            isReload () {
                this.isRouterAlive = false
                this.$nextTick(() => {
                    this.isRouterAlive = true
                })
            }
        }
    }
</script>

<style lang="less">
    @import './style/variables';
	@import './style/element-ui';
	@import './style/common';
    @import './style/scrollBar';
    @import './style/main';
    .pop-loading{
        position: fixed;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.6);
        z-index: 10000;
    }
    .pop-loading .el-loading-mask{
        background: none;
    }
    .pop-loading .el-loading-spinner i{
        font-size: 40px;
        color: #fff;
    }
    .pop-loading  .el-loading-spinner .el-loading-text{
        color: #fff;
    }
</style>
